<template>
  <div>
    <div class="header_goods">
      <div class="inputall">
        <el-input placeholder="请输入商品名称" class="inptas" v-model="inputgoodsname"
          @keyup.enter.native="seachname"></el-input>
        <el-input placeholder="请输入最低价格" class="inptas" v-model="inputmin" @keyup.enter.native="seachPrice"></el-input>
        <span class="heng">~</span>
        <el-input placeholder="请输入最高价格" class="inptas" v-model="inputmax" @keyup.enter.native="seachPrice"></el-input>
        <el-button type="primary" @click.native="seachAll">搜索 <i class="el-icon-search"></i></el-button>
      </div>
      <!-- <div class="add" @click="JumpAdd">
        <el-image :src="url"> </el-image>
        <p>添加</p>
		
      </div> -->
    </div>
    <div class="banner-table">
      <el-table :data="pageTicket" style="width: 100%">
        <el-table-column  label="商品图片">
          <template slot-scope="scope">
            <el-image :src="basurl + scope.row.wareImg" style="width: 50px; height:50px;border-radius: 10px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="wareName" label="商品名称">
        </el-table-column>
        <el-table-column prop="price" label="商品原价">
        </el-table-column>
        <el-table-column prop="brandName" label="品牌">
        </el-table-column>
        <el-table-column prop="flavorName" label="香型">
        </el-table-column>
        <el-table-column prop="proofName" label="度数">
        </el-table-column>
        <el-table-column prop="downStatus" label="是否下架">
          <template slot="header" slot-scope="scope">
            <el-dropdown @command="xiajia" trigger="click">
              <span class="el-dropdown-link">
                是否下架<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="2"> 全部 </el-dropdown-item>
                <el-dropdown-item command="0">已下架</el-dropdown-item>
                <el-dropdown-item command="1"> 未下架</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.downStatus == 0">已下架</span>
            <span v-if="scope.row.downStatus == 1">未下架</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="库存量">
        </el-table-column>
        <el-table-column prop="vipPrice" label="会员价">
        </el-table-column>

        <el-table-column prop="type" label="商品类别">
          <template slot="header" slot-scope="scope">

            <el-dropdown @command="leibie" trigger="click">
              <span class="el-dropdown-link">
                商品类型<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="2"> 全部 </el-dropdown-item>
                <el-dropdown-item command="0">普通商品</el-dropdown-item>
                <el-dropdown-item command="1"> 积分商品 </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>

          <template slot-scope="scope">
            <span v-if="scope.row.type == 0">普通商品</span>
            <span v-if="scope.row.type == 1">积分商品</span>
          </template>

        </el-table-column>

        <!-- <el-table-column label="更多" style="width: 200px;">
          <template slot-scope="scope">
            <div class="scope">
              <el-button type="primary" size="mini" @click="revisegoods(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="delgoods(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <!--分页-->
      <el-row>
        <el-col class="fenye">
          <!--  @size-change="handleSizeChange" -->
          <el-pagination :page-size.sync="pagesize" @current-change="handleCurrentChange" layout="total,prev, pager, next"
            :page-count="total" :current-page.sync="pageIndex">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: require('../assets/add.png'),
      basurl: require('../assets/baseUrl').baseUrl,
      total: 0,  //总数据条数
      pageIndex: 1,  //当前所在页默认是第一页
      pagesize: 5,  //每页显示多少行数据 默认设置为10
      ticket: [],  //图片拼接
      pageTicket: [],//分页后的当前页数据
      Productcategory: null,//商品类别
      Listingstatus: null,//上架状态
      inputgoodsname: "",//商品名称搜索
      inputmin: "",//搜索最低价格
      inputmax: "",//搜索最高价格
    }
  },
  methods: {
    // delgoods(row) {
    //   /* console.log(row) */
    //   this.$http.post(this.basurl + "ware/deleteWare", {
    //     wareId: row.wareId
    //   }).then(res => {
    //     if (res.data.code == 200) {
    //       this.$message.success("删除成功")
    //       if (this.inputgoodsname != "") {
    //         this.getgoodsname()

    //       } else if (this.inputmin != "" || this.inputmax != "") {
    //         this.getgoodsPrice()
    //       } else if (this.Productcategory != null) {
    //         this.handleCommandaaa(this.Productcategory)
    //       } else if (this.Listingstatus != null) {
    //         this.handleCommand(this.Listingstatus)
    //       } else {
    //         this.getTicket()
    //       }
    //     }
    //   })
    // },

    seachPrice() {
      this.pageIndex = 1
      this.getgoodsPrice()
    },
    //按钮搜索
    seachAll() {
      if (this.inputgoodsname) {
        this.getgoodsname()
      } else if (this.inputmin && this.inputmax) {
        this.getgoodsPrice()
      }
    },

    //价格搜索
    getgoodsPrice() {
      this.Listingstatus = null
      this.Productcategory = null
      this.inputgoodsname = ''
      this.$http.post(this.basurl + "ware/out/wareListByNamePrice", {
        pageIndex: this.pageIndex,
        pageSize: this.pagesize,
        minPrice: this.inputmin,
        maxPrice: this.inputmax
      }).then(res => {
        /*    console.log(res) */
        if (res.data.code == 200) {
          this.total = res.data.data.pageCount
          this.pageTicket = res.data.data.wareList
        } else {
          this.pageTicket = []
          this.total = 1
        }
      })
    },
    seachname() {
      this.pageIndex = 1
      this.getgoodsname()
    },
    //名字搜索
    getgoodsname() {
      this.Listingstatus = null
      this.Productcategory = null
      this.inputmin = ""
      this.inputmax = ""
      this.$http.post(this.basurl + "ware/out/wareListByNamePrice", {
        pageIndex: this.pageIndex,
        pageSize: this.pagesize,
        wareName: this.inputgoodsname

      }).then(res => {
        /*   console.log(res) */
        if (res.data.code == 200) {
          /*   console.log(res) */
          this.total = res.data.data.pageCount
          this.pageTicket = res.data.data.wareList

        } else {
          this.pageTicket = []
          this.total = 1
        }
      })
    },
    //分页
    handleCurrentChange(row) {
      this.pageIndex = row
      if (this.inputgoodsname != "") {
        this.getgoodsname()

      } else if (this.inputmin != "" || this.inputmax != "") {
        this.getgoodsPrice()
      } else if (this.Productcategory != null) {
        this.handleCommandaaa(this.Productcategory)
      } else if (this.Listingstatus != null) {
        this.handleCommand(this.Listingstatus)
      } else {
        this.getTicket()
      }
    },
    leibie(a) {
      this.pageIndex = 1
      this.handleCommandaaa(a)
    },
    //商品类别
    handleCommandaaa(a) {
      this.inputmin = ""
      this.inputmax = ""
      this.inputgoodsname = ""
      this.Productcategory = a
      if (this.Listingstatus != null) {
        if (a == 2) {
          this.$http.post(this.basurl + 'ware/wareListByDown', {
            pageIndex: this.pageIndex,
            pageSize: this.pagesize,
            downStatus: this.Listingstatus
          }).then(res => {
            /*  console.log(res) */
            /*  console.log("xia") */
            if (res.data.code == 200) {
              this.Productcategory=null
              this.total = res.data.data.pageCount
              this.pageTicket = res.data.data.wareList
            } else {
              this.pageTicket = []
              this.total = 1
            }
          })
        } else {
          this.$http.post(this.basurl + "ware/wareListByDownType", {
            pageIndex: this.pageIndex,
            pageSize: this.pagesize,
            type: this.Productcategory,
            downStatus: this.Listingstatus
          }).then(res => {
            if (res.data.code == 200) {
              /*   console.log(res) */
              this.total = res.data.data.pageCount
              this.pageTicket = res.data.data.wareList
            } else {
              this.pageTicket = []
              this.total = 1
            }
          })
        }

      } else {
        if (this.Productcategory == 2) {
          this.getTicket()
          this.Productcategory=null

        } else {
          this.$http.post(this.basurl + 'ware/wareListByType', {
            pageIndex: this.pageIndex,
            pageSize: this.pagesize,
            type: this.Productcategory
          }).then(res => {
            /* console.log(res) */
            if (res.data.code == 200) {
              this.total = res.data.data.pageCount
              this.pageTicket = res.data.data.wareList
            } else {
              this.pageTicket = []
              this.total = 1
            }
          })
        }

      }

    },
    xiajia(index) {
      this.pageIndex = 1
      this.handleCommand(index)
    },
    //是否下架
    handleCommand(a) {
      this.inputmin = ""
      this.inputmax = ""
      this.inputgoodsname = ""
      this.Listingstatus = a
      if (this.Productcategory != null) {
        if (a==2) {
          this.$http.post(this.basurl + 'ware/wareListByType', {
            pageIndex: this.pageIndex,
            pageSize: this.pagesize,
            type: this.Productcategory
          }).then(res => {
            /* console.log(res) */
            if (res.data.code == 200) {
              this.Listingstatus=null
              this.total = res.data.data.pageCount
              this.pageTicket = res.data.data.wareList
            } else {
              this.pageTicket = []
              this.total = 1
            }
          })
        } else {
          this.$http.post(this.basurl + "ware/wareListByDownType", {
            pageIndex: this.pageIndex,
            pageSize: this.pagesize,
            type: this.Productcategory,
            downStatus: this.Listingstatus
          }).then(res => {
            if (res.data.code == 200) {
              /*    console.log(res) */
              this.total = res.data.data.pageCount
              this.pageTicket = res.data.data.wareList
            } else {
              this.pageTicket = []
              this.total = 1
            }
          })
        }

      } else {
        if (this.Listingstatus == 2) {
          this.getTicket()
          this.Listingstatus=null
        } else {
          this.$http.post(this.basurl + 'ware/wareListByDown', {
            pageIndex: this.pageIndex,
            pageSize: this.pagesize,
            downStatus: this.Listingstatus
          }).then(res => {
            /*  console.log(res) */
            /*  console.log("xia") */
            if (res.data.code == 200) {
              this.total = res.data.data.pageCount
              this.pageTicket = res.data.data.wareList
            } else {
              this.pageTicket = []
              this.total = 1
            }
          })
        }

      }

    },
    // 获取页面的表格所有数据
    getTicket() {
      this.$http.post(this.basurl + 'ware/out/wareList', {
        pageIndex: this.pageIndex,
        pageSize: this.pagesize,
      }).then(res => {
        if (res.data.code == 200) {
         /*  console.log(res) */
          this.total = res.data.data.pageCount
          this.pageTicket = res.data.data.wareList
        } else {
          this.pageTicket = []
          this.ticket = []
          this.total = 1
        }
      })



    },
    //下架状态

    // JumpAdd() {
    //   /*  this.$router.push("/teachermanager/teacherdetails?teacherinfoid=" + update.teaId) */
    //   this.$router.push("/projectmananger/ProjectListAdd")
    // },
    // revisegoods(row) {
    //   /*    console.log(row) */
    //   this.$router.push("/projectmananger/ProjectListAdd?newwareId=" + row.wareId)
    // },

  },
  mounted() {
    this.getTicket()
  },
  watch: {

  }
}
</script>
<style lang="less">
.header_goods {
  width: 80vw;
  display: flex;
  height: 65px;
  align-items: center;
  margin-bottom: 15px;
  margin-left: 30px;
  justify-content: space-between;

  .inputall {
    display: flex;
    align-items: center;

    .el-input {
      margin: 0 5px;
    }

    .el-button--primary>span {
      position: relative;
      left: 0;
      top: 0;
    }

  }

  .add {
    width: 30px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
      margin-right: 0;
    }

    p {
      text-align: center;
      cursor: pointer;
    }




  }


}

.banner-table {
  margin-left: 30px;
  width: 80vw;

  .el-button--primary>span {
    position: relative;
    left: 0;
    top: 0;
  }

  .el-table th.el-table__cell>.cell {
    text-align: center;
  }

  .el-table td.el-table__cell div {
    text-align: center;
  }

  .el-pagination {
    display: block;
  }

  .fenye {
    text-align: center;
  }

  .scope {
    display: flex;
  }

  .el-button--mini,
  .el-button--mini.is-round {
    padding: 5px 6px;
  }
}
</style>
